<template>
  <div :class="active?'item active':'item'" @click="click">{{o.name}}</div>
</template>

<script>

import { changeURLArg } from '../../../utils/url';

export default {
  name: 'ComplexityItem',
  props: {
    o: Object,
  },
  data() {
    return {
      active: false
    }
  },
  created() {
    if(!this.$route.query.complexity) {
      this.$router.push({path: '/',});
      return false;
    }

    if(this.$route.query.complexity == this.o.t) {
      this.active = true;
    }
  },
  methods: {
    click() {
      let href = changeURLArg(location.href, 'complexity', this.o.t);
      location.href = changeURLArg(href, 'page', 1);
      location.reload();
    },
  },
};
</script>

<style scoped>
.item {
  user-select: none;
  color: #ffffff;
  padding: 1vw 4vw;
  font-family: PingFang-SC-Bold;
  font-size: 1.1vw;
  cursor: pointer;
  display: inline-block;
  background: url('../../../assets/task/complexity.png') 0 0 / 100% 100%;
}

.item.active,
.item:hover {
  background: url('../../../assets/task/complexity_hover.png') 0 0 / 100% 100%;
}
</style>
